<!DOCTYPE >
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>KPOPTOP10</title>
<meta name="author" content="TACO" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi" />
<link rel="stylesheet" href="css/mobile.css" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/page_event.js"></script>
<script type="text/javascript" src="js/spin.js"></script>
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css'>
<link  href="http://fonts.googleapis.com/css?family=Anton:regular" rel="stylesheet" type="text/css" >
<style>
h2{
  font-family: 'Anton', serif;
  font-style: normal;
  font-weight: 300;
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0.09em;
  word-spacing: -0.041em;
  text-shadow: 0px -1px 1px #2f2f2f;
  filter: dropshadow(color=#2f2f2f, offx=0, offy=-1);
}

.num_box,dl{
  font-family: 'PT Sans Narrow', sans-serif;
  font-style: normal;
  text-shadow: none;
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0.011em;
  word-spacing: 0em;
  font-weight:normal;
}

.mini:nth-child(odd){background-color:#eaeaea}
</style>
<script language="javascript">
<!--
	var page = 1;
	var total = 0;
	var cnt = 0;
	var json_url = "";
	var blist = true;
	var $list;
	var id = Request('id');

	
	$(document).ready(function()
	{
		json_url = "http://picasaweb.google.com/data/feed/api/user/snentkr@gmail.com?alt=jsonc&kind=photo&max-results=10";
		More();
 	 });
 	 
 	 
	$(window).scroll(function()
	{
		// Android more
		if($(window).scrollTop() == $(document).height() - $(window).height())
		{
			if(page > 1 && page <= total)
			{
				if(blist)
				{
					$("#load").show();
					More();
				}
			}
		}	
	});
	
	function More()
	{
		var response = "";
		var li_class = "";
		var temp_cnt = "0";
		
		blist = false;
		$list = $("#list");

		$.getJSON(json_url + "&start-index=" + page, function(data)
		{
			total = parseInt(data.data.totalItems);
				
			if(page <= total)
			{
				$.each(data.data.items, function(i, item) 
				{  
                    cnt++;

					response += '<li>';
					response += '<a href="' + item.media.image.url + '"><img src="' + item.media.image.url + '" width="320"></a>';
					response += '<br>' + item.description;
					response += '</li>';		
						
        		});
        	}
							
			if(response == "")
				$("#loading").hide();
			else
			{
				$(response).appendTo($list);
				blist = true;
			}
				
			$("#load").hide();	
			
			page += 10;
			
			if(page > total)
				$("#loading").hide();
		});
	}

	function Save()
	{
		window.location.href = "http://new_save";
	}

	function Share()
	{
		window.location.href = "http://new_share";
	}
-->
</script>
</head>
<body>
<div id="wrap">
	<div id="nav">
		<header id="top">
			<h1>
				카톡유머
				<input type="button" name="btnSave" value="Save" onclick="javascrit:Save();">
				<input type="button" name="btnShare" value="Share" onclick="javascrit:Share();">
			</h1>
		</header>
		<section class="week">
			<h2 id="title">New</h2>
		</section>
	</div>
	<section class="week">
		<ul id="list">
		</ul>
		<div id="loading">
			<div id="load" style="display:none;"></div>
		</div>
	</section>
	<footer>
	</footer>
</div>
</body>
<script>
	var opts = {
	  lines: 8, // The number of lines to draw
	  length: 4, // The length of each line
	  width: 3, // The line thickness
	  radius: 6, // The radius of the inner circle
	  color: '#fff', // #rgb or #rrggbb
	  speed: 1, // Rounds per second
	  trail: 54, // Afterglow percentage
	  shadow: false // Whether to render a shadow
	};
	var target = document.getElementById('load');
	var spinner = new Spinner(opts).spin(target);
</script>
</html>